<template>
  <div>
    <div class="right-bar-dropdown-item"
         :class="[isHidden?'clicked':'']"
         @click="toggleDropdown">
      <div class="title">其他</div>
      <div class="dropdown"></div>
    </div>
    <div v-show="isHidden"   class="items">
      <ul class="item">
        <li v-for="(item,index) in dropdownList"
             @click="onDropDownItemClicked(item,index)"
            @mouseenter="onHover('sublist')"
             :style="{animationDelay: index*50+'ms'}">
          {{item}}
        </li>
      </ul>
    </div>
    <div :is="item.component" v-for="item in items"></div>
  </div>
</template>
<style lang="less" scoped>
  .right-bar-dropdown-item{
    padding-left: 5px;
    display: flex;
    align-items: center;
  }

  .right-bar-dropdown-item .dropdown{
    flex-grow: 1;
    flex-shrink: 0;
    float: left;
    height: 40px;
    width: 40px;
    transition: 0.5s;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("./img/dropdown.png");
  }
  .right-bar-dropdown-item.clicked .dropdown {
    /*transform: matrix(1,0,0,-1,0,0);*/
    transform: rotate(180deg);
    transition: 0.5s;
  }
  .right-bar-dropdown-item .title{
    flex-shrink: 1;
    text-align: right;
    font-size: 15px;
  }

  .items{
    position: absolute;
    /*box-shadow: 0 2px 2px rgba(0,0,0,0.2);*/
    margin-top: 8px;
    align-self: baseline;
  }
  .item{
    display: inline-block;
    overflow-scrolling: auto;
    padding: 0;
    position: relative;
    min-width: 80px;
    background: #096dd9;
    list-style:none;
    border-radius: 5px;
    z-index: 1;
    color: #fff;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  }

  .item > li{
    padding-top: 10px;
    height:30px;
    animation: animation1 0.4s ease-out ;
    animation-fill-mode: backwards ;
    border-radius: 5px;
  }
  .item > li:after{
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    pointer-events: none;
    background: #333 no-repeat 50%;
    opacity: 0;
    transition: all .3s;
  }
  .item > li:active:after {
    opacity: .3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0s;
  }
  /*.item > div:hover{*/
    /*color: #096dd9;*/
    /*background-color: white;*/
    /*border: solid 1px #096dd9*/
  /*}*/

  @keyframes animation1 {
    0% {transform: matrix(1,0,0,1,0,40); opacity: 0}
    100% {transform: matrix(1,0,0,1,0,0)}
  }

</style>
<script>
  import Vue from 'vue';

  let sublist = resolve => {
    require(['./sublist'],resolve);
  }
export default{
  components: {
    sublist
  },
	props:{
		dropdownList:{
			type: Array,
      default: []
    }
  },
	data(){
		return {
      isHidden: false,
      items: [],
    }
  },
  methods:{
    onDropDownItemClicked: function(item,index){
      this.$emit('onDropDownItemClicked',item,index);
    },
    toggleDropdown: function(){
      if(this.isHidden)
        this.isHidden= false;
      else
        this.isHidden= true;
    },
    onHover: function(e1,e2,e3){
    	let testItems = [
    		'test','test','test','test','test','test'
      ];
    	let component = {
    		'component': 'sublist',
        'left':'200px',
        'top':'200px'
      };
      this.items.push(component);
    	console.log('this',this,e1,e2,e3);
    }
  },
}
</script>
